<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-drawer v-model="props.visible" direction="rtl">
    <template #header>
      <div>
        <h4>{{ props.userInfo.nickname }}</h4> 用户ID：{{ props.userInfo.id }}
      </div>
    </template>
    <template #default>
      <div class="cell-box">
        <sapn class="cell-label"><span>注册手机号：</span>{{ props.userInfo.tel }}</sapn>
        <sapn class="cell-label"><span>余额：</span>{{ props.userInfo.balance }}</sapn>
        <sapn class="cell-label"><span>冻结余额：</span>{{ props.userInfo.frozen_balance }}</sapn>
        <sapn class="cell-label"><span>邀请码：</span>{{ props.userInfo.invite_code }}</sapn>
        <span class="cell-label">状态：
          <span v-if="props.userInfo.login_status === 1" style="color: #67c23a;">正常</span>
          <span v-else-if="props.userInfo.login_status === 2" style="color: #f56c6c;">禁用</span>
        </span>
        <sapn class="cell-label"><span>机器人总收益：</span>{{ intel?.total_robot_income }}</sapn>
        <sapn class="cell-label"><span>总提现金额：</span>{{ intel?.total_withdrawal }}</sapn>
        <sapn class="cell-label"><span>注册时间：</span>{{ formatTimestamp(props.userInfo.reg_at * 1000) }}</sapn>
        <div class="cell-label">
          拥有机器人：
          <ul v-if="intel?.user_robot && intel?.user_robot.length > 0" class="infinite-list">
            <li v-for="i in intel?.user_robot" :key="i" class="infinite-list-item">
              <span>机器人名称：{{ i.title }}</span>
              <span>价格：{{ i.price }}</span>
              <span>做单价格：{{ i.settle_fund }} USDT/单</span>
              <span>冻结本金：{{ i.init_fund }}</span>
              <span>有效期：{{ i.valid_days }}</span>
              <span>获得时间：{{ formatTimestamp(i.created_at * 1000) }}</span>
              <span>剩余时间：
                <span>{{ secondsToDay(i.valid_seconds_now) }}</span> 天
                <span>{{ secondsToHours(i.valid_seconds_now) }}</span> 小时
              </span>
              <span>已进行时间：<span>{{ countdown(i.valid_days, i.valid_seconds_now) }}</span></span>
            </li>
          </ul>
          <span v-else>无</span>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { formatTimestamp } from '@/utils/index'
import { userDetail } from '@/api/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => { }
  }
});

const emit = defineEmits(['close', 'submit']);

const close = () => {
  emit('close', false);
};

const intel = ref<any>({});

// 转换为剩余天数
const secondsToDay = (seconds: number) => {
  if (seconds <= 0) return 0
  return Math.floor(seconds / (3600 * 24));
};
// 转换为剩余小时
const secondsToHours = (seconds: number) => {
  if (seconds <= 0) return 0
  return Math.floor(seconds / (3600 * 24) / 3600);
};

// 获取进行中倒计时
const countdown = (valid_days: number, valid_seconds_now: number) => {
  const threeDaysInMillis = valid_days * 24 * 60 * 60 * 1000; // 获取当前时间
  const difference = threeDaysInMillis - valid_seconds_now * 1000; // 计算当前时间和目标时间的差值
  if (difference <= 0)
    return `${valid_days} 天 0 小时 0 分 0 秒`
  // 计算天、时、分、秒
  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);

  return `${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
}

onMounted(() => {
  if (JSON.stringify(props.userInfo) !== '{}') {
    userDetail({ id: props.userInfo.id }).then((res: any) => {
      intel.value = res.data;
    });
  }
});
</script>

<style>
.cell-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cell-label {
  color: rgb(114, 118, 123);
}

.infinite-list .infinite-list-item {
  display: flex;
  flex-direction: column;
  height: auto;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  padding: 8px 15px;
  border-radius: 4px;
  box-sizing: border-box;
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}
</style>
